<template>
    <div class="bar">
        <div id="echart" ref="mychart"></div>
    </div>
</template>

<script>
// echarts相关
let echarts = require("echarts");
import { mapState } from "vuex";
export default {
  name: "Bar",
  data() {
    return {
      myChart: {}
    };
  },
  computed: {
    ...mapState(["movies", "imags", "news", "articles"]),
    opt() {
      let obj = {
        color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['新闻', '文章', '电影', '图片'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            data:[this.news.length, this.articles.length, this.movies.length, this.imags.length]
        }
    ]
      };
      return obj;
    }
  },
  mounted() {
    this.setEchart();
  },
  updated() {
    this.setEchart();
  },
  methods: {
    setEchart() {
      let dom = this.$refs.mychart;
      this.myChart = echarts.init(dom);
      this.myChart.setOption(this.opt);
    }
  }
};
</script>

<style scoped lang='scss'>
#echart {
  width: 500px;
  height: 300px;
}
</style>